<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Access-Control-Allow-Origin" content="localhost">

  <script src="./js-source/echarts.js"></script>
  <script src="./js-source/jquery.js"></script>

  <script src="http://api.map.baidu.com/api?v=2.0&ak=gdpDWwteEoHd3TGeAAgHszakNPpjpTGU"></script>
  <script src="./js-source/bmap.min.js"></script>


  <link href="./firstPage-css/default.css" rel="stylesheet" type="text/css">
  <link href="./firstPage-css/home_min.css" rel="stylesheet" type="text/css">
  <link href="./firstPage-css/tian_min.css" rel="stylesheet" type="text/css">


  <title>总览图</title>
</head>

<body>

  <div class="map" id="earthView"> </div>
  <script type="text/javascript">
    var rawData;
    var lastData = "";

    window.setInterval(function () {
      $.ajax(getting)
    }, 1000);

    prag();



    var getting = {
      url: 'http://localhost:3000/',
      type: 'get',
      success: function (raw_data) {

        /* if(lastData == ""){
          console.log("================"+lastData)
          lastData = raw_data
        }else{
          if(lastData == raw_data){
            console.log("相等")
          }
        } */

        showData.showPlace(raw_data);

      }
    }

    var showData =  {
        showPlace:function (raw_data) {
        var serie = [];
        var item1 = {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: showData.convertData2(raw_data),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          showEffectOn: 'emphasis',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#FF0000',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          zlevel: 1
        };
        serie.push(item1);

        var item2 = {
          name: 'pm2.5',
          type: 'scatter',
          /* 显示亮度样式 */
          coordinateSystem: 'bmap',
          data: showData.convertData1(),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false /* 级别小的，是否显示地名 */
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#fff' /* 设置颜色 */
            }
          }
        };
        serie.push(item2);
        return serie;
      }

      static convertData1 = function (raw_data) {
        var res = [];

        for (var i = 0; i < raw_data.result4.length; i++) {
          var geoCoord = [raw_data.result4[i].long, raw_data.result4[i].lat];
          res.push({
            name: raw_data.result4[i].name + raw_data.result4[i].sub_num,
            // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
            value: geoCoord.concat(100),
            /* 在geoCoord数组后面再添加数组 */
            tilt: raw_data.result4[i].tilt,
            tem: raw_data.result4[i].tem,
            message: raw_data.result4[i].message
          })
        }
        return res;
      };

      static convertData2 = function (raw_data) {
        var res = [];

        for (var i = 0; i < raw_data.result1.length; i++) {
          var geoCoord = [raw_data.result1[i].long, raw_data.result1[i].lat];
          res.push({
            name: raw_data.result1[i].name + raw_data.result1[i].sub_num,
            // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
            value: geoCoord.concat(100),
            /* 在geoCoord数组后面再添加数组 */
            tilt: raw_data.result1[i].tilt,
            tem: raw_data.result1[i].tem,
            message: raw_data.result1[i].message
          })
        }
        for (var i = 0; i < raw_data.result2.length; i++) {
          var geoCoord = [raw_data.result2[i].long, raw_data.result2[i].lat];
          res.push({
            name: raw_data.result2[i].name + raw_data.result2[i].sub_num,
            // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
            value: geoCoord.concat(100),
            /* 在geoCoord数组后面再添加数组 */
            tilt: raw_data.result2[i].tilt,
            tem: raw_data.result2[i].tem,
            message: raw_data.result2[i].message
          })
        }

        for (var i = 0; i < raw_data.result3.length; i++) {
          var geoCoord = [raw_data.result3[i].long, raw_data.result3[i].lat];
          res.push({
            name: raw_data.result3[i].name + raw_data.result3[i].sub_num,
            // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
            value: geoCoord.concat(100),
            /* 在geoCoord数组后面再添加数组 */
            tilt: raw_data.result3[i].tilt,
            tem: raw_data.result3[i].tem,
            message: raw_data.result3[i].message
          })
        }

        return res;
      };

    }

    function prag(raw_data) {
      var myChart = echarts.init(document.getElementById('earthView'));
      function getFormatter(params) {
        console.dir(params);

        return "温度：" + params.data.tem + "<br/>" + "倾斜角度:" + params.data.tilt + "<br/>" + params.data.message;
      }

      function renderItem(params, api) {
        var coords = [ /* 设置所有区域褐色覆盖面积 */
          [116.7, 39.53],
          [103.73, 36.03],
          [112.91, 27.87],
          [120.65, 28.01],
          [119.57, 39.95]
        ];
        var points = [];
        for (var i = 0; i < coords.length; i++) {
          points.push(api.coord(coords[i]));
        }
        var color = api.visual('color');

        return {
          type: 'polygon',
          shape: {
            points: echarts.graphic.clipPointsByRect(points, {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height
            })
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color)
          })
        };
      }

      option = {
        // backgroundColor: '#404a59',
        title: {
          text: '预警仪器分布图',
          subtext: 'data for natural disaster',
          sublink: '#',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return getFormatter(params);
          }
          /* {b0}: {c0}地区名字+所有数值 */
        },
        bmap: {
          center: [104.114129, 37.550339],
          /* 设置地图显示的中心 */
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [{ /* 设置水区域的颜色 */
                "featureType": "water",
                "elementType": "all",
                "stylers": {
                  "color": "#044161"
                }
              },
              {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                  "color": "#064f85"
                }
              },
              {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#005b96",
                  "lightness": 1
                }
              },
              {
                "featureType": "highway",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#00508b"
                }
              },
              {
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "green",
                "elementType": "all",
                "stylers": {
                  "color": "#056197",
                  "visibility": "off"
                }
              },
              {
                "featureType": "subway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "local",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#029fd4"
                }
              },
              {
                "featureType": "building",
                "elementType": "all",
                "stylers": {
                  "color": "#1a5787"
                }
              },
              { /* 设置是否显示所有地区的名字 */
                "featureType": "label",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              }
            ]
          }
        },
        series: showData.showPlace(raw_data)
      };
      myChart.setOption(option);
    }
  </script>


</body>

</html>